<template>
  <!-- 留言反馈（用户端） -->
  <div class="app-container feedback-page">
    <div class="feedback-container">
      <!-- 留言表单区域 -->
      <!-- <div class="feedback-form glassmorphism-effect"> 
        <div class="form-header"> 
          <svg-icon icon-class="message" class="title-icon" /> 
          <h2 class="form-title">留言反馈</h2>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="90px">
          <el-form-item label="留言内容" prop="messageContent" class="enhanced-form-item">
            <el-input
              class="custom-textarea"
              v-model="form.messageContent"
              type="textarea"
              :rows="5"
              placeholder="请描述您的建议或问题..."
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
          <el-form-item class="submit-btn-container">
            <el-button class="submit-btn" type="primary" @click="submitForm">
              <svg-icon icon-class="send" class="btn-icon" />
              提交留言
            </el-button>
          </el-form-item>
        </el-form>
      </div> -->

      <!-- 留言列表区域 -->
      <div class="feedback-list glassmorphism-effect">
        <div class="list-header">
          <div class="title-wrapper">
            <svg-icon icon-class="list" class="title-icon" />
            <h2 class="list-title">我的留言</h2>
          </div>
          <el-select class="custom-select" popper-class="custom-select-dropdown" v-model="sortOrder" placeholder="排序方式" @change="handleSortChange" style="width: 120px;">
              <el-option label="最新留言" value="desc"></el-option>
              <el-option label="最早留言" value="asc"></el-option>
          </el-select>
        </div>
        <el-timeline class="timeline-container">
          <el-timeline-item class="timeline-item"
            v-for="(item, index) in feedbackList"
            :key="index"
            :timestamp="parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}')"
            placement="top"
          >
            <el-card class="feedback-card hover-effect">
              <div class="message-content">
                <div class="user-info">
                  <div class="avatar-wrapper"> 
                    <img :src="item.avatar || defaultAvatar" class="user-avatar" alt="用户头像">
                  </div>
                  <span class="user-name">{{ item.userName }}</span>
                </div>
                <p class="message-text">{{ item.messageContent }}</p>
              </div>
              <div v-if="item.feedbackContent" class="feedback-response">
                <div class="badge-wrapper">
                  <div class="admin-info">
                    <div class="admin-info">
                      <img src="@/assets/images/admin-avatar.png" class="admin-avatar" alt="管理员头像">
                      <span class="admin-name">管理员</span>
                    </div>
                  </div>
                  <p class="feedback-text">{{ item.feedbackContent }}</p>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>

        <!-- 分页 -->
        <div class="pagination-container" >
          <el-pagination class="custom-pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listMyFeedback, addFeedback } from "@/api/feedback/feedback";
export default {
  name: "UserFeedback",
  data() {
    return {
      // 表单参数
      form: {
        messageContent: '',
        senderId: localStorage.getItem("userId"),
        userName: localStorage.getItem("userName"),
        userRole: localStorage.getItem("roleName")
      },
      // 表单校验规则
      rules: {
        messageContent: [
          { required: true, message: "留言内容不能为空", trigger: "blur" },
          { max: 500, message: "留言内容长度不超过500个字符", trigger: "blur" }
        ]
      },
      // 留言列表数据
      feedbackList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        senderId: localStorage.getItem("userId"),
        orderByColumn: 'createTime',
        isAsc: 'desc'
      },
      // 总条数
      total: 0,
      // 排序方式
      sortOrder: 'desc',
      // 默认头像
      defaultAvatar: require('@/assets/images/profile.jpg')
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 获取留言列表 */
    getList() {
      listMyFeedback(this.queryParams).then(response => {
        this.feedbackList = response.rows;
        this.total = response.total;
      });
    },
    /** 提交留言 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addFeedback(this.form).then(response => {
            this.$modal.msgSuccess("留言成功");
            this.form.messageContent = '';
            this.getList();
          });
        }
      });
    },
    /** 分页大小改变 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    /** 当前页改变 */
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    /** 排序方式改变 */
    handleSortChange(value) {
      this.sortOrder = value;
      this.queryParams.isAsc = value;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.feedback-page {
  background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
  min-height: 100vh;
  padding: 20px;

  .feedback-container {
    max-width:900px;
    margin: 0 auto;
    display: grid;
    grid-gap: 20px;

    .glassmorphism-effect {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    }

    .feedback-form {
      padding: 32px;
      transition: transform 0.3s ease;

      .form-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .title-icon {
          width: 30px;
          height: 30px;
          margin-right: 16px;
          color: #409EFF;
        }

        .form-title {
          margin: 0;
          font-size: 20px;
          color: #303133;
          font-weight: 600;
          letter-spacing: 1px;
        }
      }

      .enhanced-form-item {
        ::v-deep .el-form-item__label {
          font-size: 16px;
          color: #606266;
          font-weight: 500;
        }
      }

      .custom-textarea {
        ::v-deep .el-textarea__inner {
          border-radius: 12px;
          border: 2px solid #e4e7ed;
          transition: all 0.3s;
          padding: 16px;
          font-size: 15px;

          &:focus {
            border-color: #409EFF;
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
          }
        }
      }

      .submit-btn-container {
        margin-top: 24px;
        text-align: right;

        .submit-btn {
          padding: 10px 28px;
          border-radius: 14px;
          font-size: 16px;
          transition: all 0.3s;
          background: linear-gradient(135deg, #409EFF, #66b1ff);
          border: none;
          display: inline-flex;
          align-items: center;

          .btn-icon {
            margin-right: 8px;
            width: 18px;
            height: 18px;
          }

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(64, 158, 255, 0.3);
          }
        }
      }
    }

    .feedback-list {
      padding: 32px;

      .list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;

        .title-wrapper {
          display: flex;
          align-items: center;

          .title-icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
            color: #409EFF;
          }

          .list-title {
            margin: 0;
            font-size: 18px;
            color: #303133;
            font-weight: 600;
            letter-spacing: 1px;
          }
        }

        .custom-select {
          width: 140px;

          ::v-deep .el-input__inner {
            border-radius: 8px;
            border: 2px solid #e4e7ed;
            height: 40px;
          }
        }
      }

      .timeline-container {
        padding-left: 20px;

        .timeline-item {
          ::v-deep .el-timeline-item__timestamp {
            color: #909399;
            font-size: 14px;
            margin-bottom: 8px;
          }
        }

        .feedback-card {
          border-radius: 12px;
          transition: transform 0.3s;
          border: none;

          &.hover-effect:hover {
            transform: translateX(10px);
          }

          .message-content {
            display: flex;
            align-items: flex-start;
            margin-bottom: 16px;

            .user-info {
              display: flex;
              align-items: center;
              margin-right: 16px;
              min-width: 120px;

              .user-avatar {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                margin-right: 12px;
                border: 2px solid #e4e7ed;
              }

              .user-name {
                font-weight: 530;
                color: #5e85d2;
                font-size: 16px;
                white-space: nowrap;
              }
            }

            .message-text {
              color: #606266;
              line-height: 1.7;
              font-size: 15px;
              margin: 0;
              flex: 1;
              padding: 12px 0;
              display: flex;
              align-items: center;
            }
          }

          .feedback-response {
            margin-top: 16px;
            padding: 16px;
            background: #f8faff;
            border-radius: 8px;

            .badge-wrapper {
              display: flex;
              align-items: center;

              .admin-info {
                display: flex;
                align-items: center;
                min-width: 120px;

                .admin-avatar {
                  width: 44px;
                  height: 44px;
                  border-radius: 50%;
                  margin-right: 12px;
                  border: 2px solid #e4e7ed;
                }

                .admin-name {
                  color: #67C23A;
                  font-weight: 600;
                  font-size: 14px;
                  white-space: nowrap;
                }
              }

              .feedback-text {
                color: #606266;
                line-height: 1.7;
                font-size: 14px;
                margin: 0;
                flex: 1;
                padding: 10px 0;
                display: flex;
                align-items: center;
              }
            }
          }
        }
      }

      .custom-pagination {
        margin-top: 32px;

        ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
          background: linear-gradient(135deg, #409EFF, #66b1ff);
        }
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feedback-form, .feedback-list {
  animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
</style>